<template>
    <div>
        <canvas ref="canvas" width="600" height="500"></canvas>
    </div>
</template>
<script>
import { attachVirtualRubik } from '@/assets/basesrc/virtualrubik';

export default {
    name: 'specialcube',
    mounted() {
        attachVirtualRubik(this.$refs.canvas, function (virtualrubik) {
            // 获取默认
            var attr = virtualrubik.getCubeAttributes();

            // 画布颜色
            attr.backgroundColor = [222, 225, 230, 255];

            // 自发光（环境、漫、镜面、光泽）
            var partsPhong = [0.5, 0.6, 0.5, 16.0];
            for (var i = 0; i < attr.partsFillColor.length; i++) {
                attr.partsFillColor[i] = [245, 222, 179, 255];
                attr.partsFillColor[i] = null;
                attr.partsPhong[i] = partsPhong;
            }

            // 魔方块颜色
            var faceColors = [
                [0, 50, 115, 230],// 右蓝
                [248, 248, 248, 230],// 上白
                [164, 0, 15, 230],// 前红
                [0, 135, 45, 230],// 左绿
                [255, 235, 0, 230],// 下黄
                [242, 115, 1, 230] // 后橙
            ];

            // 面片自发光（环境、漫、镜面、光泽）
            var stickersPhong = [1.0, 0.1, 0.3, 8.0];
            for (var i = 0; i < 6; i++) {
                for (var j = 0; j < 9; j++) {
                    attr.stickersFillColor[i * 9 + j] = faceColors[i];
                    attr.stickersFillColor[i * 9 + j] = [20,20,20,230];
                    attr.stickersPhong[i * 9 + j] = stickersPhong;
                }
            }

            virtualrubik.setCubeAttributes(attr);
        });
    }
}
</script>
<style scoped>
canvas {
    background-color: rgba(245, 222, 179, 0.836);
    border: 20px solid rgb(170, 171, 176);
    border-radius: 10px;
}
</style>